<template>
  <div>
    <h1>{{msg}}</h1>






<el-form   label-width="80px" label-position="left" style="margin-right:5px;margin-bottom: 20px; border-radius: 10px; border:1px skyblue solid ;" :inline="true" >
  <div align="left" style="margin: 10px;">
   <i class="el-icon-search" style="margin-right: 1100px;">筛选搜索</i>

   <el-button>重置</el-button>
   <el-button type="primary" @click="postform" >查询搜索</el-button>
  </div>






  <div align="left" style="margin-left: 50px;">
        <el-form-item label="输入搜索:">
          <el-input style="width: 250px;" v-model="m.a">

          </el-input>
        </el-form-item>



        <el-form-item label="收件人:">
          <el-input style="width: 250px;" v-model="m.b">

          </el-input>
        </el-form-item>

        <el-form-item label="提交时间">

               <el-date-picker type="date" placeholder="选择日期"  style="width: 100%;" v-model="m.date"></el-date-picker>

        </el-form-item>

        <el-form-item label="订单状态">
             <el-select placeholder="全部"  v-model="m.type">
               <el-option label="待付款" value="1"></el-option>
               <el-option label="待发货" value="2"></el-option>
               <el-option label="已发货" value="3"></el-option>
               <el-option label="已完成" value="4"></el-option>
               <el-option label="已关闭" value="5"></el-option>
             </el-select>
        </el-form-item>

</div>

      <div align="left" style="margin-left: 50px;">
        <el-form-item label="订单分类" >
            <el-select placeholder="全部" style="margin-right: 30px;" v-model="m.select1">
              <el-option label="正常订单" value="1"></el-option>
              <el-option label="秒杀订单" value="2"></el-option>
            </el-select>
          </el-form-item>

        <el-form-item label="订货来源" >
            <el-select placeholder="全部" v-model="m.select2">
              <el-option label="PC来源" value="pc"></el-option>
              <el-option label="APP来源" value="app"></el-option>
            </el-select>
          </el-form-item>
       </div>

</el-form>

<el-row>
  <el-col :span="24" style="border:1px skyblue solid;" align="left">
    <div>
      <i class="el-icon-document-copy" >&nbsp;数据列表</i>&nbsp;&nbsp;
      <span>
        <el-button type="primary" icon="el-icon-circle-plus" @click="dialogVisible3=true" >
          新增订单
        </el-button>
      </span>
    </div>
  </el-col>
</el-row>

  <el-row>
    <el-col style="border:1px skyblue solid; margin-top: 10px ; " >
      <el-table :data="list">
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="num" label="订单编号"></el-table-column>
        <el-table-column prop="date" label="提交时间"></el-table-column>
        <el-table-column prop="user" label="用户账号"></el-table-column>
        <el-table-column prop="mon" label="订单金额"></el-table-column>
        <el-table-column prop="pay" label="支付方法"></el-table-column>
        <el-table-column prop="from" label="订单来源"></el-table-column>
        <el-table-column prop="note" label="订单状态"></el-table-column>
        <el-table-column label="[操作]" width="300">

          <template slot-scope="s">

            <el-button  icon="el-icon-search"  @click="dialogVisible=true" size="mini">查看订单</el-button>
           <el-button type="danger"  icon="el-icon-delete" size="mini" @click="del(s.$index)">删除订单</el-button>
            <!-- <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(s.$index)">删除订单</el-button> -->
           <!-- <el-button  v-if="list.indexOf(scope.row.state) != -1" @click="assignment(['currentItem', 'dialogUrgentVisible'], [scope.row, true])">
               催办</el-button> -->

          </template>

        </el-table-column>
      </el-table>
    </el-col>
  </el-row>

  <el-dialog

    title="当前订单信息"
    :visible.sync="dialogVisible"
    width="80%">
    <span>商品信息</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>

  <el-dialog
    title="搜索结果信息"
    :visible.sync="dialogVisible2"
    width="80%">
    <span>{{msg2}}</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible2 = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
    </span>
  </el-dialog>

  <el-dialog
    title="新增订单"
    :visible.sync="dialogVisible3"
    width="80%">
   <el-button @click="getOrder()">异步请求</el-button>
    <span
    >{{item}}</span>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible3 = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible3 = false">确 定</el-button>
    </span>
  </el-dialog>



</div>
</template>

<script>
  import axios from 'axios';
  export default {
    name:'xzh',

    data(){
      return{
        msg2:"",
        dialogVisible:false,
        dialogVisible2:false,
        dialogVisible3:false,

        msg:"谢志鸿手机管理项目day1",

        item:{
            id:' ',
            num:' ',
            date:' ',
            user:' ',
            mon: '',
            pay:' ',
            from:' ',
            note:' '
        },

        m:{
          a:'',
          b:'',
          date:'',
          type:'',
          select1:'',
          select2:'',
        },
        list:[
          {
            id:'3',
            num:'01',
            date:'2021.4.10',
            user:'test',
            mon:19998,
            pay:'支付宝',
            from:'APP',
            note:'已关闭'
          },{
            id:'2',
            num:'02',
            date:'2021.4.10',
            user:'test',
            mon:19998,
            pay:'微信',
            from:'APP',
            note:'已发货'

          }

        ]
      }

    },
    methods:{
      del:function(index){
        this.list.splice(index,1)

      },

      postform:function(){
        // console.log(this.m),
        this.dialogVisible2=true;

        var obj=JSON.stringify(this.m);

        this.msg2=obj;
        },

        getOrder:function(){

          // console.log(this.item);

                axios.get("https://www.fastmock.site/mock/adcee98c0486733ddd30db04f518cd9a/name/getname")
                .then(res =>{
                  // console.log(this.item)
                  this.item=res.data;
                  // console.log(this.item);
          this.list.splice(0,0,this.item);
                }).catch(err =>{
                  console.log(err);
                });


        }

      }
    }

</script>

<style>
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 10px;
    padding: 20px 10px 20px 10px;

  }

</style>
